<template>
	<view>
		<view>
			<input placeholder="输入商品名称" class="input" placeholder-class="center"/>
		</view>
		<view class="head-nav">
			<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">分类1</view>
			<view :class="navIndex==2?'activite':''" @click="checkIndex(2)">分类2</view>
			<view :class="navIndex==3?'activite':''" @click="checkIndex(3)">分类3</view>
			<view :class="navIndex==4?'activite':''" @click="checkIndex(4)">分类4</view>
			<view :class="navIndex==5?'activite':''" @click="checkIndex(5)">分类5</view>
			<view :class="navIndex==6?'activite':''" @click="checkIndex(6)">分类6</view>
		</view>
		<view class="content" v-if="navIndex==1">
		    <view class="top">
				<view class="image">
					<image src="../../static/meat.png"></image>
				</view>
				<view class="product-detail">
					<text class="text1">带皮五花肉 (300g)</text>
					<text class="text2">库存：16546</text>
					<text class="text3">已售：165</text>
				</view>
			</view>
			<view class="price">
				<text class="text4">￥14.80</text>
				<text class="text5">上架到门店</text>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
	  return {
		 navIndex:1
	  }
    },
	methods:{
	  checkIndex(index){
		this.navIndex = index  
	  }
	}
}
</script>
<style>
	page {
		background-color: rgb(247,247,247);
	}
	.input {
		width: 690rpx;
		height: 56rpx;
		background: #EEEEEE;
		border-radius: 56rpx;
		margin: 12rpx auto;
	}
	.center {
		text-align: center;
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
		line-height: 60rpx;
	}
	.head-nav {
	    width: 100%;
		height: 80rpx;
	    margin-bottom:30rpx;
		font-size: 30rpx;
	    display: flex;
		align-items: center;
	    justify-content: space-between;
		background-color: #fff;
	  }
	.activite{
	    font-weight: bold;
	    border-bottom: 6rpx solid #FEB140;
	  }
	.head-nav>view{
		padding-bottom: 6rpx;
		padding-left: 6rpx;
	  }
	 .content {
		  width: 690rpx;
		  height: 190rpx;
		  background: #fff;
		  border-radius: 20rpx;
		  margin-left: 30rpx;
		  display: flex;
		  flex-direction: column;
		 /* border: 1px solid #ddd; */
	  }
	  .top {
		  display: flex;
		  flex-direction: row;
	  }
	 .content image {
		  display: flex;
		  justify-content: flex-start;
		  margin-top: 20rpx;
		  margin-left: 20rpx;
		  width: 100rpx;
		  height: 100rpx;
	  }
	.product-detail {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		line-height: 40rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
	}
	.text1 {
		font-size: 30rpx;
		color: #1A1A1A;
		margin-top: 20rpx;
	}
	.text2 {
		font-size: 20rpx;
		color: #666666;
	}
	.text3 {
		font-size: 20rpx;
		color: #666666;
	}
	.price {
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		margin-left: 20rpx;
	}
	.text4 {
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #FF3030;
	}
	.text5 {
		width: 180rpx;
		height: 40rpx;
		background: #FEB140;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #1A1A1A;
		margin-left: 370rpx;
		text-align: center;
		line-height: 40rpx;
	}
</style>
